<template>
  <el-dialog
    title="确认停用"
    :visible.sync="visible"
    width="35%"
    :before-close="closeFn"
  >
    <!-- 表单内容 -->
    <el-form label-width="120px">
      <span class="span">确定要{{ statuses[vals.status] }}: {{ vals.name }} 吗</span>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="button">
      <el-button class="btnquxiao" @click="closeFn">取 消</el-button>
      <el-button
        type="primary"
        class="btn1"
        @click="submitWork"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { clickWarehouseList, clickHouse } from '@/api'
import { Message } from 'element-ui'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    vals: {
      type: Object,
      default: () => ''
    }
  },
  data() {
    return {
      statuses: {
        0: '启用',
        1: '停用'
      }
    }
  },
  methods: {
    // 确定按钮
    // 判断更改状态与运行状态
    // 取与运行状态相反的映射
    // 请求接口、更改状态成功
    // 提示用户
    // 通知父组件更新数据、关闭弹框
    async submitWork() {
      let a = null
      if (this.vals.status === 0) {
        a = 1
      } else {
        a = 0
      }
      // 修改仓库
      await clickWarehouseList({
        id: this.vals.id,
        status: a
      })
      // 修改库区
      await clickHouse({
        id: this.vals.id,
        status: a
      })
      Message.success('更改状态成功')
      this.$emit('update')
      this.$emit('close')
    },

    // 取消按钮
    closeFn() {
      this.$emit('close')
    }
  }
}
</script>

<style>
.el-dialog .el-dialog__header {
    padding: 20px 30px 10px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
}
.el-dialog__body {
  padding: 19px 16px;
}
.el-dialog .span{
  margin-left: 15px;
  margin-top: -10px;
}
.button .el-button {
  border-radius: 40px;
  color: black;
  margin-right: 13px;
  margin-top: 4px;
  height: 38px;
  line-height: 7px;
  width: 100px;
}
</style>
